<template>
  <div class="singer-mv">
    <div class="mv-list">
      <ul>
        <li v-for="(item,index) in mv" :key="index" @click="itemClick(item.id)">
          <img v-lazy="item.imgurl" alt="">
          <div class="playcount">
            <i class="iconfont icon-bofang"></i><span>{{item.playCount | initVolume}}</span>
          </div>
          <p class="desc">{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingerMv',
  props: {
    mv: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    itemClick(id) {
      this.$router.push(`/home/mvdetail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.singer-mv {
  .mv-list {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 200px;
        margin: 15px 20px;
        overflow: hidden;
        img {
          width: 200px;
          height: 200px;
        }
        .playcount {
          position: absolute;
          top: -20%;
          left: 0;
          right: 0;
          text-align: right;
          z-index: 10;
          color: #fff;
          background-image: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.1)) !important;
          padding: 5px;
          span {
            margin: 0 5px;
          }
        }
        &:hover .playcount {
          animation: songs_top_bottom 0.5s linear forwards;
        }
      }
    }
  }
}
</style>